<template>
  <div class="login" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header title="" :showBackBtn="true" :needBackground="false">
      <div slot="content" class="normal-wrapper">
        <img src="@/assets/img/logo_01.png" alt="" />
        <div class="form-wrapper">
          <div class="login-title">
            <span class="normal" @click="$commonJs.goPage('login')">登录</span>
            /
            <span class="active">注册</span>
          </div>
          <form novalidate @submit.prevent="validateBeforeSubmit">
            <div>
              <md-field>
                <input-validate
                  v-model="formData.mobile"
                  placeholder="请输入您的手机号"
                  v-validate="'required|mobile'"
                  name="mobile"
                  type="phone"
                  icon="iconshouji1"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="您的手机号"
                  :error="errors.first('mobile')"
                >
                </input-validate>
                <input-validate
                  v-model="formData.password"
                  placeholder="输入您的密码"
                  type="password"
                  icon="iconmima"
                  name="password"
                  v-validate="'required'"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="您的密码"
                  :error="errors.first('password')"
                >
                </input-validate>
                <input-validate
                  placeholder="输入确认密码"
                  v-model="formData.confirm"
                  type="password"
                  icon="iconmima"
                  name="confirm"
                  v-validate="{ required: 'true', is: formData.password }"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="确认密码"
                  :error="errors.first('confirm')"
                >
                </input-validate>
                <input-validate
                  v-model="formData.imgcode"
                  placeholder="输入您的图形验证码"
                  type="digit"
                  name="imgcode"
                  rightType="1"
                  :imgUrl="imgUrl"
                  v-validate="'required|max:4'"
                  icon="iconyanzhengma1"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="图形验证码"
                  :error="errors.first('imgcode')"
                  @changeImg="getImgCode"
                >
                </input-validate>
                <input-validate
                  v-model="formData.code"
                  placeholder="输入您的短信验证码"
                  type="digit"
                  name="code"
                  rightType="2"
                  icon="iconyanzhengma1"
                  v-validate="'required|max:6'"
                  data-vv-value-path="innerValue"
                  data-vv-validate-on="input"
                  data-vv-as="短信验证码"
                  :error="errors.first('code')"
                  @sendCode="sendCode"
                  ref="code"
                >
                </input-validate>
              </md-field>
            </div>
            <div class="login-btn">
              <span v-show="invite">邀请码：{{ invite }}</span>
              <a-button type="primary" block html-type="submit">注 册</a-button>
            </div>
          </form>
        </div>
        <div class="agree">
          <a-checkbox :checked="isChecked" @change="changeChecked">
            <span class="agree_link"
              >我已同意<a
                href="javaScript:(0)"
                @click="agreement('user', '用户注册服务协议')"
                >《用户注册服务协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('service', '投资人服务协议')"
                >《投资人服务协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('tzfx', '投资风险提示书')"
              >
                《投资风险提示书》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('dzxy', '电子签名授权协议')"
              >
                《电子签名授权协议》 </a
              ><a
                href="javaScript:(0)"
                @click="agreement('wtkj', '委托快捷签署协议')"
              >
                《委托快捷签署协议》
              </a></span
            ></a-checkbox
          >
        </div>
      </div>
    </hry-header>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="visible"
      onOk="handleOk"
      @cancel="handleOk"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import bg from "@/assets/img/login_bg.png";
import { Field } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
const root = process.env.VUE_APP_API_ROOT;
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "",
  components: {
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field,
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    return {
      bg: bg,
      visible: false,
      type: "",
      title: "",
      isChecked: true,
      formData: {
        mobile: "",
        confirm: "",
        password: "",
        imgcode: "",
        code: ""
      },
      imgUrl: ""
    };
  },
  created() {
    if (this.$route.query.invite) {
      this.$store.dispatch("changeInvite", this.$route.query.invite);
    }
    let isPC = this.isPC();
    if (isPC) {
      let invite = this.$route.query.invite;
      window.location.href = root + "/login/register/invite/" + invite;
    }
    this.getImgCode();
  },
  methods: {
    sendCode() {
      let obj = {
        mobile: this.formData.mobile,
        imgcode: this.formData.imgcode
      };
      this.$validator.validateAll(obj).then(result => {
        if (result) {
          let params = {
            mobile: this.formData.mobile,
            code: this.formData.imgcode,
            type: "login"
          };
          this.$ajax
            .post(this.$api.sendLoginCode, params)
            .then(() => {
              this.$refs.code.countdown();
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    getImgCode() {
      this.$ajax
        .post(this.$api.getImgCode, false, true)
        .then(res => {
          this.imgUrl = res.code;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    changeChecked(e) {
      this.isChecked = e.target.checked;
    },
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.isChecked) {
            let params = {
              mobile: this.formData.mobile,
              code: this.formData.code,
              password: this.formData.password,
              invite: this.invite
            };
            this.$ajax
              .post(this.$api.register, params, false)
              .then(() => {
                this.$message.success("注册成功");
                this.$router.push({ name: "login" });
              })
              .catch(err => {
                this.$message.error(err);
              });
          } else {
            this.$message.error("尚未同意协议");
          }
        }
      });
    },
    handleOk() {
      this.visible = false;
    },
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    },
    isPC() {
      let flag = true;
      let userAgentInfo = navigator.userAgent;
      let Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  },
  computed: {
    invite() {
      return this.$store.state.invite;
    }
  }
};
</script>

<style scoped lang="less">
.login {
  /*height: 100%;*/
  width: 100%;
  background-size: 100%, 100% !important;
  .normal-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 20px 0 20px;
    text-align: center;
    > img {
      margin-top: 20px;
      margin-bottom: 40px;
    }
    .form-wrapper {
      position: relative;
      text-align: left;
      margin: 20px 20px 62px 20px;
      padding: 30px 20px 100px 20px;
      background: @white;
      border-radius: 5px;
      box-shadow: 2px 2px 10px rgba(254, 226, 212, 1);
      .iconfont {
        .linear_gradient_back(#fad683, #f8962d, #ef8028);
        font-size: 36px;
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .login-title {
        font-size: 30px;
        margin-bottom: 34px;
        .active {
          color: #3e4a59;
          font-size: 48px;
        }
        .normal {
          color: #cdcdcd;
        }
      }
      .link {
        font-size: 25px;
      }
      .login-btn {
        text-align: center;
        position: absolute;
        bottom: -40px;
        width: calc(100% - 40px);
        span {
          font-size: 24px;
          color: red;
          line-height: 50px;
          display: inline-block;
        }
        .ant-btn {
          height: 75px;
          font-size: 30px;
        }
      }
    }
    .agree {
      width: calc(100% - 160px);
      text-align: center;
      margin: 0 auto;
      font-size: 18px;
      a {
        font-size: 18px;
      }
    }
  }
}
</style>
